// 旅程详情页
import ActionSheet from 'tdesign-miniprogram/action-sheet/index'
import {TripType} from '@/pages/travel/detail/type'

Page({
  data: {
    id: 0,  // 旅游卡片id
    isRefresh: false,  // 是否正在刷新
    loadingProps: {size: '32rpx', theme: 'spinner'},  // 加载图标的属性

    td1: 'width: 150rpx;',
    td2: 'width: 200rpx;',
    td3: 'width: 200rpx;',
    td4: 'width: 150rpx;',

    img1: 'https://dimg04.c-ctrip.com/images/0201h120008ykuc2p140E_W_1080_808_R5_D.jpg',
    img2: 'https://dimg04.c-ctrip.com/images/020711200093dikyq5539_W_1080_808_R5_D.jpg',
    img3: 'https://dimg04.c-ctrip.com/images/02002120008ohcq2n980B_W_1080_808_R5_D.jpg',
    img4: 'https://dimg04.c-ctrip.com/images/1mc5f12000bjebr43E471_W_1080_808_R5_D.png',
    imageProps: {mode: 'aspectFill'},

    visible: false,
    images: [],

    tripData: <TripType[]>[
      {
        id: 1,
        tripType: '出租',
        tripTypeClass: '~text-orange',
        tripInfo: [
          {
            id: 101,
            from: '南1门',
            fromTime: '15:40',
            to: '西北旺站',
            toTime: '16:00',
            processInfoClass: 'line0',
            processRemark: '京 ENM000',
          }
        ]
      },
      {
        id: 2,
        tripType: '地铁',
        tripTypeClass: '~text-green',
        tripInfo: [
          {
            id: 201,
            from: '西北旺站',
            fromRemark: 'B 东北口',
            to: '二里沟站',
            toRemark: '右侧下车',
            processInfo: '16号线',
            processInfoClass: 'line16',
            processRemark: '宛平城方向 11站',
          },
          {
            id: 202,
            from: '二里沟站',
            to: '朝阳门站',
            processInfo: '6号线',
            processInfoClass: 'line6',
            processRemark: '潞城方向 7站',
          },
          {
            id: 203,
            from: '朝阳门站',
            to: '北京站',
            toRemark: 'C 东南口',
            processInfo: '2号线',
            processInfoClass: 'line2',
            processRemark: '建国门方向 2站',
          }
        ]
      },
      {
        id: 3,
        tripType: '高铁',
        tripTypeClass: '~text-blue',
        tripInfo: [
          {
            id: 301,
            from: '北京站',
            fromTime: '18:54',
            to: '东台站',
            toTime: '06:46',
            processInfo: 'Z51',
            processRemark: '18车厢 09-12',
          }
        ]
      },
      {
        id: 4,
        tripType: '出租',
        tripTypeClass: '~text-orange',
        tripInfo: [
          {
            id: 401,
            from: '东台站',
            fromTime: '7:00',
            to: '美居酒店',
            toTime: '8:30',
            processInfoClass: 'line0',
            processRemark: '苏 J5JY70',
          }
        ]
      },
    ]
  },

  onLoad(options) {
    console.log('page init', options)
    // 获取传入的参数
    this.setData({
      id: options.id,
    })
  },

  // 下拉刷新
  onRefresh() {
    this.setData({isRefresh: true})
    setTimeout(() => {
      this.setData({isRefresh: false})
    }, 1500)
  },

  // 点击图片
  onClickImg(e) {
    console.log('点击图片', e)
    this.setData({
      images: [
        'https://dimg04.c-ctrip.com/images/0201h120008ykuc2p140E_W_1080_808_R5_D.jpg',
        'https://dimg04.c-ctrip.com/images/020711200093dikyq5539_W_1080_808_R5_D.jpg',
        'https://dimg04.c-ctrip.com/images/02002120008ohcq2n980B_W_1080_808_R5_D.jpg',
        'https://dimg04.c-ctrip.com/images/1mc5f12000bjebr43E471_W_1080_808_R5_D.png',
      ],
      visible: true,
    })

    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000',
    })
  },

  // 点击关闭按钮
  onClose(e) {
    const {trigger} = e.detail

    console.log(trigger)
    this.setData({
      visible: false,
    })

    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#1976d2',
    })
  },

  // 点击删除按钮
  onDelete(e) {
    const {index} = e.detail

    console.log(index, ActionSheet)

    ActionSheet.show({
      context: this,
      selector: '#t-action-sheet',
      description: '要删除这张照片吗？',
      items: [
        {
          label: '删除',
          color: '#d54941',
        },
      ],
    })
  },
})
